<template>
    <div>
      <h1>学生信息管理系统</h1>
      <div>
        <p>总人数: {{ students.length }} | 男生: {{ maleCount }} | 女生: {{ femaleCount }}</p>
        <button @click="addNewStudent">新增</button>
      </div>
      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>籍贯</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(student, index) in students" :key="student.id" :class="student.gender === '男' ? 'male' : 'female'">
            <td>
              <span v-if="!student.isEditing">{{ student.name }}</span>
              <input v-else v-model="student.name" class="form-input" type="text" placeholder="姓名">
            </td>
            <td>
              <span v-if="!student.isEditing">{{ student.id }}</span>
              <input v-else v-model="student.id" class="form-input" type="text" placeholder="学号">
            </td>
            <td>
              <span v-if="!student.isEditing">{{ student.gender }}</span>
              <select v-else v-model="student.gender" class="form-input">
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </td>
            <td>
              <span v-if="!student.isEditing">{{ student.birthDate }}</span>
              <input v-else v-model="student.birthDate" class="form-input" type="date">
            </td>
            <td>
              <span v-if="!student.isEditing">{{ student.hometown }}</span>
              <input v-else v-model="student.hometown" class="form-input" type="text" placeholder="籍贯">
            </td>
            <td>
              <button v-if="!student.isEditing" @click="editStudent(index)">修改</button>
              <button v-if="!student.isEditing" @click="deleteStudent(index)">删除</button>
              <button v-else @click="saveStudent(index)">保存</button>
              <button v-else @click="cancelEdit(index)">取消</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  import { students } from './../assets/js/students.js';
  
  export default {
    data() {
      return {
        students: students
      };
    },
    computed: {
      maleCount() {
        return this.students.filter(student => student.gender === '男').length;
      },
      femaleCount() {
        return this.students.filter(student => student.gender === '女').length;
      }
    },
    methods: {
      editStudent(index) {
        this.$set(this.students[index], 'isEditing', true);
      },
      saveStudent(index) {
        this.$set(this.students[index], 'isEditing', false);
      },
      cancelEdit(index) {
        this.$set(this.students[index], 'isEditing', false);
      },
      deleteStudent(index) {
        if (confirm('确定要删除这条记录吗？')) {
          this.students.splice(index, 1);
        }
      },
      addNewStudent() {
        const newStudent = {
          id: '',
          name: '',
          gender: '男',
          birthDate: '',
          hometown: '',
          isEditing: true
        };
        this.students.push(newStudent);
      }
    }
  };
  </script>
  
  <style scoped>
  @import '../assets/css/styles.css';
  </style>